import { Button, Flex, Input, message, Select } from 'antd'
import RichTextEditor from '../richText'
import SingleChoice from '@/component/question/singleChoice'
import MultipleChoice from '@/component/question/multipleChoice'
import FillBlank from '@/component/question/fillBlank'
import Judgment from '@/component/question/judgment'
import PIcon from '../pIcon'
import { DeleteOutlined } from '@ant-design/icons'
import { useMemo } from 'react'
import Essay from '@/component/question/essay'
import { questionTypes } from '@/config/globalConfig'
type IQuestionType = {
  name: string
  data: Array<any>
  answer: any
}

export interface IQuestion {
  content?: IQuestionType
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO'
  onChange?: (value: any) => void
}

function QuestionType(props: IQuestion) {
  const {
    content = {
      name: '选择题',
      data: [],
      answer: '',
    },
    onChange = () => {},
    state = 'QUESTYPE',
  } = props

  const handlerAppend = () => {
    onChange({ ...content, data: [...content.data, { type: 'essay' }] })
  }

  const QuesTemplate = useMemo(() => {
    const handleDelete = (index: number) => {
      const temp = [...content.data]
      const titleCount = temp.filter((item) => item.type === 'title').length
      const otherCount = temp.filter((item) => item.type !== 'title').length

      if (temp[index].type === 'title' && titleCount <= 1) {
        message.error('至少保留一个标题')
        return
      }
      if (temp[index].type !== 'title' && otherCount <= 1) {
        message.error('至少保留一个组件')
        return
      }

      temp.splice(index, 1)
      onChange({ ...content, data: temp })
    }
    return content.data.map((item, index) => {
      let curComponent = null
      switch (item.type) {
        case 'title':
          curComponent = <RichTextEditor state={state}></RichTextEditor>
          break
        case 'singleChoice':
          curComponent = <SingleChoice state={state}></SingleChoice>
          break
        case 'multipleChoice':
          curComponent = <MultipleChoice state={state}></MultipleChoice>
          break
        case 'fillBlank':
          curComponent = <FillBlank state={state}></FillBlank>
          break
        case 'judgment':
          curComponent = <Judgment state={state}></Judgment>
          break
        case 'essay':
          curComponent = <Essay state={state}></Essay>
          break
        default:
          curComponent = <div>{item.type}</div>
      }
      return (
        <Flex
          align="center"
          justify="space-between"
          gap={'1rem'}
          key={`${item.type}-${index}`}>
          {curComponent}
          <Flex gap={'1rem'}>
            <Select
              style={{ width: 120 }}
              options={questionTypes}
              value={item.type}
              onChange={(value) => {
                let temp = [...content.data]
                temp[index].type = value
                onChange({ ...content, data: temp })
              }}></Select>
            <DeleteOutlined
              style={{ color: 'red' }}
              onClick={() => handleDelete(index)}
            />
          </Flex>
        </Flex>
      )
    })
  }, [content, onChange, state])

  const QuesTion = useMemo(() => {
    return content.data.map((item, index) => {
      let curComponent = null
      switch (item.type) {
        case 'title':
          curComponent = (
            <RichTextEditor
              state={state}
              content={item.content}
              onChange={(editor) => {
                const value = editor.getJSON()
                content.data[index].content = value
                onChange({ ...content, data: content.data })
              }}></RichTextEditor>
          )
          break
        case 'singleChoice':
          curComponent = (
            <SingleChoice
              answer={content.answer}
              selections={item.content}
              onAnswerChange={(answer) => {
                content.answer = answer
                onChange({ ...content })
              }}
              onSelectionChange={(selection: any) => {
                content.data[index].content = selection
                onChange({ ...content, data: content.data })
              }}
              state={state}></SingleChoice>
          )
          break
        case 'multipleChoice':
          curComponent = (
            <MultipleChoice
              answers={content.answer}
              selections={item.content}
              onAnswersChange={(answers) => {
                content.answer = answers
                onChange({ ...content })
              }}
              onSelectionChange={(selection: any) => {
                content.data[index].content = selection
                onChange({ ...content, data: content.data })
              }}
              state={state}></MultipleChoice>
          )
          break
        case 'judgment':
          curComponent = (
            <Judgment
              answer={content.answer}
              onAnswerChange={(answer) => {
                content.answer = answer
                onChange({ ...content })
              }}
              state={state}></Judgment>
          )
          break
        case 'fillBlank':
          curComponent = (
            <FillBlank
              data={item.content}
              state={state}
              onDataChange={(data) => {
                content.data[index].content = data
                onChange({ ...content })
              }}
              onAnswersChange={(answers) => {
                content.answer = answers
                onChange({ ...content })
              }}></FillBlank>
          )
          break
        case 'essay':
          curComponent = (
            <Essay
              data={item.content}
              state={state}
              onChange={(data) => {
                content.answer = data
                onChange({ ...content })
              }}></Essay>
          )
          break
        default:
          curComponent = <div>{item.type}</div>
      }
      return (
        <Flex
          align="center"
          justify="space-between"
          gap={'1rem'}
          key={`${item.type}-${index}`}>
          {curComponent}
        </Flex>
      )
    })
  }, [content, onChange, state])

  if (state === 'QUESTYPE') {
    return (
      <Flex vertical gap={'10px'}>
        <h3>题型名称：</h3>
        <Input
          key="name"
          placeholder="请输入题型名称"
          value={content.name}
          allowClear
          onChange={(e) => {
            onChange({ ...content, name: e.target.value })
          }}
        />
        <h3>题型模板：</h3>
        {QuesTemplate}
        <Flex justify="right">
          <Button
            type="text"
            onClick={() => {
              handlerAppend()
            }}>
            <PIcon name="icon-add"></PIcon>添加组件
          </Button>
        </Flex>
      </Flex>
    )
  }
  return (
    <Flex vertical gap={'10px'}>
      {QuesTion}
    </Flex>
  )
}

export default QuestionType
